<!-- form.vue -->
<template>
  <form>
    <slot></slot>
  </form>
</template>

<script>
export default {
  name: 'iForm',
  props: {
    // 表单控件绑定的数据对象，在校验或重置时会访问该数据对象下对应的表单数据
    model: {
      type: Object
    },
    // 表单验证规则，即上面介绍的 async-validator 所使用的校验规则
    rules: {
      type: Object
    },
  },
  provide() {
    return {
      form: this
    }
  },
  data() {
    return {
      fields: []// 用于缓存formItem 实例
    }
  },
  methods: {
    // 公开方法：全部重置数据
    resetFields() {
      this.fields.forEach(field => {
        field.resetField();
      });
    },
    // 公开方法:重置校验数据，支持promise
    validate(callback) {
      return new Promise((resolve) => {
        let valid = true
        let count = 0
        this.fields.forEach(field => {
          field.validate('', errors => {
            if (errors) {
              valid = false
            }
            if (++count === this.fields.length) {
              // 全部完成  
              resolve(valid)
              if (typeof callback === 'function') {
                callback(valid)
              }
            }
          })
        })
      })
    }
  },
  created() {
    this.$on('on-form-item-add', (field) => {
      if (field) this.fields.push(field)
    })
    this.$on('on-form-item-remove', (field) => {
      if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
    });
  },
  mounted() { }
}
</script>

<style lang="less" scoped>
</style>